Vue.component('image-item', {
  props: ['src'],
  template: '<img :src=" src ?  `http://s.moemoe.la/` + src : `../public/img/default.png` "/>'
});
Vue.component('public-header',{
  props:['status'],
  template:`
      <div class="header">
        <div class="content header-content">
            <a class="logo"> <img src="../public/img/logo.png" alt="" width="47" height="40" > </a>
            <div class="search">
                <input type="text" placeholder="搜索">
                <button>
                    <i class="fa fa-search"></i>
                </button>
            </div>
            <ul class="nav">
                <li :class="{active:status.index==1}"><a href="./index.html">首页</a></li>
                <li :class="{active:status.index==2}"><a href="./community.html">社团</a></li>
                <li :class="{active:status.index==3}"><a href="./recommend.html">学部</a></li>
                <li :class="{active:status.index==4}"><a href="./bagdetails.html">书包</a></li>
            </ul>
            <div class="user-info" v-if="status.loginStatus">
                <div class="message">
                    <i class="fa fa-envelope-o"></i>
                    <sup>22</sup>
                </div>
                <div class="head-portrait"><img src="../public/img/temp1.png" alt="" srcset=""></div>
            </div>
            <div v-else class="login-btn">登录</div>
            <a href="#" class="download-client">下载客户端</a>
        </div>
    </div>
  `
});
Vue.component('public-footer',{
  props:['data'],
  template:`
    <div class="footer">
        <div class="content footer-content">
        <div class="center">
            <div class="left">
                <h2>Kira二次元</h2>
                <ul class="ClearFix">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div class="right">
                <a href="#">
                    <div>
                        <i class="fa fa-download"></i>
                    </div>
                    <span>客户端下载</span>
                </a>
                <a href="#">
                    <div>
                        <i class="fa fa-weibo"></i>
                    </div>
                    <span>官方微博</span>
                </a>
            </div>
            </div>
        </div>
        <div class="copyright">&#169 2016 上海萌萌达网络科技有限公司 沪ICP备15040135号</div>
    </div>`
});
Vue.component('user-info',{
    props:['data'],
    template:`
        <div class="user-detailInfo">
          <ul>
            <li>
              <img src="../public/img/icon-header.png" alt="">
            </li>
            <li>
              <h3 class="rig-conSp-left">左一城
                <span class="rig-conSp-rig">
                  <i>
                    <b>Lv</b>13</i>
                </span>
              </h3>
            </li>
            <li>
              <ul class="rig-conUl">
                <li class="person-fans">
                  <span>2312</span>
                  <span>粉丝</span>
                </li>
                <li class="person-post">
                  <span>512</span>
                  <span>发帖</span>
                </li>
                <li class="person-many">
                  <span>1241</span>
                  <span>节操</span>
                </li>
              </ul>
            </li>
            <li>
              <div class="getpost" v-if="data.index == 1 || data.index == 2 ">
                <i>
                  <img src="../public/img/icon-getpost.png" alt="">
                </i>
                <span>我要发帖</span>
              </div>
              <div class="contribute"  v-if="data.index == 2">
                <i>
                  <img src="../public/img/icon-tougao.png" alt="">
                </i>
                <span>我要投稿</span>
              </div>
              <div class="mybag"  v-if="data.index == 3">
                <i>
                  <img src="../public/img/icon-whitebag.png" alt="">
                </i>
                <span>
                  我的书包
                </span>
              </div>
            </li>
          </ul>
        </div>
    `
});